<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card shadow="never" class="box-card">
          <div>
            <!--指标类型-->
            <el-row class="one-cared" :gutter="24">
              <el-col class="one-cared-oneitem" :span="8">
                <el-icon class="iconfont">&#xe611;</el-icon>
                <!--              <svg-icon iconName="el-icontp-juzuoduiqi"></svg-icon>-->
                <span>指标管理--指标类型</span>
              </el-col>
              <el-col class="one-cared-twoitem" :span="2">
                <el-button link class="iconfont el-icontp-tianjia1" @click="newMertics()"
                  >&#xe63b;</el-button
                >
                <el-button link class="iconfont el-icontp-daoru">&#xe67b;</el-button>
                <el-button link class="iconfont el-icontp-import">&#xe600;</el-button>
              </el-col>
            </el-row>

            <el-form
              :inline="true"
              :model="formInline"
              class="form-inline"
              label-position="left"
              label-width="80px"
            >
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="学期" class="form-inline-select">
                    <el-select
                      v-model="MetricsData.term"
                      @change="term(MetricsData.term)"
                      size="large"
                      placeholder="请输入选择学期"
                      class="form-inline-select"
                    >
                      <el-option label="2022-2023第一学期" value="2022-one" />
                      <el-option label="2022-2023第二学期" value="2022-two" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="一级指标" class="form-inline-select">
                    <el-select
                      v-model="value1"
                      size="large"
                      placeholder="请输入选择一级指标"
                      class="form-inline-select"
                    >
                      <el-option label="品德发展" value="品德发展" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="二级指标" class="form-inline-select">
                    <el-select
                      v-model="value2"
                      size="large"
                      placeholder="请输入选择二级指标"
                      class="form-inline-select"
                    >
                      <el-option label="理想信念" value="理想信念" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="8">
                  <el-form-item label="三级指标" class="form-inline-select">
                    <el-select
                      v-model="value3"
                      size="large"
                      placeholder="请输入选择三级指标"
                      class="form-inline-select"
                    >
                      <el-option label="了解党史国情" value="了解党史国情" />
                      <el-option label="会唱国歌" value="会唱国歌" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-button type="success" class="button" size="large">查询</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <!--      <el-col :span="24">-->
      <!--        <div>-->
      <!--        <el-card shadow="never" class="box-cardtwo">-->
      <el-table
        :data="data.table"
        style="width: 100%; font-size: 10px"
        header-align="center"
        class="box-cardtwo"
        :header-cell-style="{
          background: '#dff3de',
          color: '#5cb279',
          width: '100%',
          height: '50px',
          fontSize: '14px'
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="date" label="一级指标" width="180" align="center">
          <template #default="scope">
            <p>{{ scope.row.oneMet }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="二级指标" width="180" align="center">
          <template #default="scope">
            <p>{{ scope.row.twoMet }}</p>
          </template>
        </el-table-column>

        <el-table-column prop="address" label="三级指标" align="center">
          <template #default="scope">
            <p>{{ scope.row.threeMet }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="分值" align="center">
          <template #default="scope">
            <p>{{ scope.row.score }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="评价" align="center">
          <template #default="scope">
            <p v-if="scope.row.appraise.SelfAss">自评:{{ scope.row.appraise.SelfAss }}%</p>
            <p v-if="scope.row.appraise.Parents">家长:{{ scope.row.appraise.Parents }}%</p>
            <p v-if="scope.row.appraise.PeerEva">互评{{ scope.row.appraise.PeerEva }}%</p>
            <p v-if="scope.row.appraise.TeacherEva">师评{{ scope.row.appraise.TeacherEva }}%</p>
            <p v-if="scope.row.appraise.Other">其他{{ scope.row.appraise.Other }}%</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-row :gutter="7">
              <el-col :span="3">
                <el-button
                  link
                  class="iconfont el-icontp-bianji"
                  @click="revMertics(scope.$index, scope.row)"
                  >&#xe635;</el-button
                >
              </el-col>
              <el-col :span="3">
                <el-button
                  link
                  class="iconfont el-icontp-lajitong"
                  @click="handleDelete(scope.$index, scope.row)"
                  >&#xe633;</el-button
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!--        </el-card>-->
      <!--        </div>-->
      <!--      </el-col>-->
    </el-row>
    <div class="dialog_diy">
      <el-dialog v-model="dialogFormVisible" width="30%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">添加指标</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <el-form :model="form" :data="percentage" label-position="left">
          <el-form-item label="一级指标" :label-width="formLabelWidth">
            <el-select
              v-model="form.oneMet"
              size="large"
              placeholder="请输入选择一级指标"
              style="width: 90%"
            >
              <el-option label="品德发展" value="品德发展" />
              <el-option label="品德发展" value="品德发展" />
            </el-select>
          </el-form-item>

          <el-form-item label="二级指标" :label-width="formLabelWidth">
            <el-select
              v-model="form.twoMet"
              size="large"
              placeholder="请输入选择二级指标"
              style="width: 90%"
            >
              <el-option label="理想信念" value="理想信念" />
              <el-option label="理想信念" value="理想信念" />
            </el-select>
          </el-form-item>
          <el-form-item label="三级指标" :label-width="formLabelWidth">
            <el-input
              v-model="form.threeMet"
              type="textarea"
              placeholder="请输入三级指标"
              :rows="6"
              style="width: 90%"
            />
          </el-form-item>
          <el-form-item label="分值" :label-width="formLabelWidth">
            <el-input
              type="number"
              v-model="form.score"
              placeholder="请输入分值"
              style="width: 90%"
            />
          </el-form-item>
          <el-form-item label="评价:" :label-width="formLabelWidth" class="my_form">
            <el-form-item label="自评">
              <el-checkbox
                v-model="checked1"
                :checked="checked1"
                @click="check1"
                style="padding-right: 10px"
              />
              <el-input-number
                precision="输入分值占比"
                v-model="form.SelfAss"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis1"
                @change="handleChange1"
              />%
            </el-form-item>
            <el-form-item label="互评">
              <el-checkbox
                v-model="checked2"
                :checked="checked2"
                @click="check2"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="form.PeerEva"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis2"
                @change="handleChange2"
              />%
            </el-form-item>
            <el-form-item label="家长">
              <el-checkbox
                v-model="checked3"
                :checked="checked3"
                @click="check3"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="form.Parents"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis3"
                @change="handleChange3"
              />%
            </el-form-item>
            <el-form-item label="师评">
              <el-checkbox
                v-model="checked4"
                :checked="checked4"
                @click="check4"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="form.TeacherEva"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis4"
                @change="handleChange4"
              />%
            </el-form-item>
            <el-form-item label="其他">
              <el-checkbox
                v-model="checked5"
                :checked="checked5"
                @click="check5"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="form.Other"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis5"
                @change="handleChange5"
              />%
            </el-form-item>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisible = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="addMetricsList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog v-model="dialogFormVisibleNo" width="30%" :show-close="false" class="dialog">
        <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <p :id="titleId" :class="titleClass" class="logStyle">修改指标</p>
            <el-icon class="el-icon--left" @click="close"
              ><svg
                viewBox="0 0 1024 1024"
                style="color: #cecfce"
                xmlns="http://www.w3.org/2000/svg"
                data-v-ea893728=""
              >
                <path
                  fill="currentColor"
                  d="m466.752 512-90.496-90.496a32 32 0 0 1 45.248-45.248L512 466.752l90.496-90.496a32 32 0 1 1 45.248 45.248L557.248 512l90.496 90.496a32 32 0 1 1-45.248 45.248L512 557.248l-90.496 90.496a32 32 0 0 1-45.248-45.248L466.752 512z"
                />
                <path
                  fill="currentColor"
                  d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
                /></svg
            ></el-icon>
          </div>
        </template>
        <el-form :model="percentage" :data="percentage" label-position="left">
          <el-form-item label="一级指标" :label-width="formLabelWidth">
            <el-select
              v-model="percentage.oneMet"
              size="large"
              placeholder="请输入选择一级指标"
              style="width: 90%"
            >
              <el-option label="品德发展" value="品德发展" />
              <el-option label="品德发展" value="品德发展" />
            </el-select>
          </el-form-item>

          <el-form-item label="二级指标" :label-width="formLabelWidth">
            <el-select
              v-model="percentage.twoMet"
              size="large"
              placeholder="请输入选择二级指标"
              style="width: 90%"
            >
              <el-option label="理想信念" value="理想信念" />
              <el-option label="理想信念" value="理想信念" />
            </el-select>
          </el-form-item>
          <el-form-item label="三级指标" :label-width="formLabelWidth">
            <el-input
              v-model="percentage.threeMet"
              type="textarea"
              placeholder="请输入三级指标"
              :rows="6"
              style="width: 90%"
            />
          </el-form-item>
          <el-form-item label="分值" :label-width="formLabelWidth">
            <el-input
              type="number"
              v-model="percentage.score"
              placeholder="请输入分值"
              style="width: 90%"
            />
          </el-form-item>
          <el-form-item label="评价:" :label-width="formLabelWidth" class="my_form">
            <el-form-item label="自评">
              <el-checkbox
                v-model="checked1"
                :checked="checked1"
                @click="check1"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="percentage.SelfAss"
                :min="1"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis1"
                @change="handleChange1"
              />%
            </el-form-item>
            <el-form-item label="互评">
              <el-checkbox
                v-model="checked2"
                :checked="checked2"
                @click="check2"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="percentage.PeerEva"
                :min="1"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis2"
                @change="handleChange2"
              />%
            </el-form-item>
            <el-form-item label="家长">
              <el-checkbox
                v-model="checked3"
                :checked="checked3"
                @click="check3"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="percentage.Parents"
                :min="1"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis3"
                @change="handleChange3"
              />%
            </el-form-item>
            <el-form-item label="师评">
              <el-checkbox
                v-model="checked4"
                :checked="checked4"
                @click="check4"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="percentage.TeacherEva"
                :min="1"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis4"
                @change="handleChange4"
              />%
            </el-form-item>
            <el-form-item label="其他">
              <el-checkbox
                v-model="checked5"
                :checked="checked5"
                @click="check5"
                style="padding-right: 10px"
              />
              <el-input-number
                v-model="percentage.Other"
                :min="1"
                :max="100"
                size="small"
                controls-position="right"
                :disabled="numdis5"
                @change="handleChange5"
              />%
            </el-form-item>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footerBox">
            <span class="dialog-footer">
              <el-button class="btn" @click="dialogFormVisibleNo = false">取消</el-button>
              <el-button class="btn btnC" type="success" @click="revMetricsList()">确定</el-button>
            </span>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getMetricsList, addMetrics, delMetrics, reviseMetrics } from '@/api/metrics'
// import { useRouter } from 'vue-router'
// import appraise from '../../../mock/appraise/appraise'
// import {values} from "lodash-es";
// const router = useRouter()
// const checked = ref(false)
const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
let data = reactive({
  table: [],
  fromList: [],
  from: [],
  page: 1,
  size: 5
})

const dialogFormVisible = ref(false)
const dialogFormVisibleNo = ref(false)
const formLabelWidth = '100px'
let metrics1: any[] = []
// const numdis = !checked.value
// console.log(numdis)

const list = () => {
  getMetricsList({
    current: 1,
    size: 10
  }).then((resp) => {
    data.table = resp.data[0].metrics
    metrics1 = resp.data[0]
  })
}
list()
// const num = ref(1)

const term = (term: string) => {
  console.log(term)

  if (term == '2022-one') {
    list()
  } else if (term == '2022-two') {
    list()
  } else {
    list()
  }
  console.log(MetricsData.data)
}

//判断选矿是否选中
const checked1 = ref(false)
let numdis1 = ref(true)
const check1 = () => {
  if (!checked1.value) {
    numdis1.value = false
  } else if (checked1.value) numdis1.value = true

  // console.log(checked.value)
}
const checked2 = ref(false)
let numdis2 = ref(true)
const check2 = () => {
  if (!checked2.value) {
    numdis2.value = false
  } else if (checked2.value) numdis2.value = true

  // console.log(checked.value)
}
const checked3 = ref(false)
let numdis3 = ref(true)
const check3 = () => {
  if (!checked3.value) {
    numdis3.value = false
  } else if (checked3.value) numdis3.value = true
}

const checked4 = ref(false)
let numdis4 = ref(true)
const check4 = () => {
  if (!checked4.value) {
    numdis4.value = false
  } else if (checked4.value) numdis4.value = true
}

const checked5 = ref(false)
let numdis5 = ref(true)
const check5 = () => {
  if (!checked5.value) {
    numdis5.value = false
  } else if (checked5.value) numdis5.value = true
}

//数字输入框按钮
const handleChange1 = (_value: number) => {
  // console.log(value)
}
const handleChange2 = (_value: number) => {
  // console.log(value)
}
const handleChange3 = (_value: number) => {
  // console.log(value)
}
const handleChange4 = (_value: number) => {
  // console.log(value)
}
const handleChange5 = (_value: number) => {
  // console.log(value)
}

let MetricsData = reactive({
  data: [{}],
  // class: '全部',
  // school: '全部',
  // grade: '全部',
  // level: '全部',
  // name: '',
  data2: [{}],
  term: '2022-2023第一学期'
})

// const checkList = ref(['selected and disabled', 'Option A'])
const form = reactive({
  name: '',
  oneMet: '',
  twoMet: '',
  threeMet: '',
  score: '',
  SelfAss: '',
  PeerEva: '',
  Parents: '',
  TeacherEva: '',
  Other: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  cropList: []
})

let percentage = reactive({
  percentage: [],
  oneMet: '',
  twoMet: '',
  threeMet: '',
  score: '',
  SelfAss: '',
  PeerEva: '',
  Parents: '',
  TeacherEva: '',
  Other: '',
  id: '',
  appraise: []
})

const addMetricsList = () => {
  addMetrics({
    semester: '',
    cropList: form.cropList,
    oneMet: form.oneMet,
    twoMet: form.twoMet,
    threeMet: form.threeMet,
    score: form.score,
    SelfAss: form.SelfAss,
    Parents: form.Parents,
    PeerEva: form.PeerEva,
    Other: form.Other,
    TeacherEva: form.TeacherEva
  }).then((resp) => {
    console.log(resp)
    // form.cropList = resp.data.metrics
    // for (let i =0;resp.data.length;i++){
    //  formArr.push(resp.data[i].metrics)
    // }
    // console.log(resp.data)
    // console.log(formArr)
    dialogFormVisible.value = false

    list()
  })
}

const revMetricsList = () => {
  reviseMetrics({
    // semester: '',
    id: percentage.id,
    oneMet: percentage.oneMet,
    twoMet: percentage.twoMet,
    threeMet: percentage.threeMet,
    score: percentage.score,
    SelfAss: percentage.SelfAss,
    Parents: percentage.Parents,
    PeerEva: percentage.PeerEva,
    Other: percentage.Other,
    TeacherEva: percentage.TeacherEva
  }).then((resp) => {
    console.log(resp)
    dialogFormVisibleNo.value = false

    list()
  })
}

const newMertics = (_row) => {
  dialogFormVisible.value = true
  console.log(dialogFormVisible.value)
}

props: {
  percentage: {
    type: Object
  }
}

const revMertics = (_index, row) => {
  dialogFormVisibleNo.value = true
  percentage = row
  // console.log(appraise)
  console.log(dialogFormVisibleNo.value)
}

interface Admin {
  id: number
  semester: string
  metrics: [
    {
      id: number
      appraise: [
        {
          Other: number
          Parents: number
          PeerEva: number
          SelfAss: number
          TeacherEva: number
          id: number
        }
      ]
      oneMet: string
      score: string
      threeMet: string
      twoMet: string
    }
  ]
}

const handleDelete = (index: number, row: Admin) => {
  console.log(index, row)
  delMetrics({
    id: row.id
  }).then((resp) => {
    list()
    console.log(resp)
  })
}
</script>

<style lang="less" scoped>
.footerBox {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: -20px;
}
.btnC {
  background-color: #2c8f79;
}
.btn {
  border-radius: 15px;
  width: 95px;
}
.box-card {
  border-radius: 10px;
  //border: 1px solid #4bac70;
  padding: 0 10px 0 10px;
  margin: 0 10px 40px 10px;
}
.one-cared-twoitem {
  display: flex;
  justify-content: space-between;
}
.one-cared {
  display: flex;
  justify-content: space-between;
}
.one-cared-oneitem {
  //margin: 0 10px 0 10px;
  display: flex;
  align-items: center;
}
span {
  padding-left: 15px;
  color: #878787;
}

.form-inline {
  margin-top: 20px;
}
.button {
  background-color: #2c8e79;
  width: 25%;
  border-radius: 11px;
}
.form-inline-select {
  width: 96%;
}

.box-cardtwo {
  border-radius: 10px;
  //padding: 20px 40px 0 40px;
  margin: 0 20px 40px 20px;
  height: auto;
}

.dialog_diy {
  ::v-deep(.el-dialog__wrapper) {
    // eslint-disable-line
    .el-dialog {
      .el-dialog__body {
        padding: 0px;
      }
      .el-dialog__header {
        padding: 0px;
      }
      .el-dialog__headerbtn {
        top: 5px;
        right: 5px;
        padding-top: 10px;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
        height: 30px;
        width: 35px;
      }
      .el-dialog__headerbtn .el-dialog__close:hover {
        color: gray;
      }
    }
  }
}

.dialog {
  border-radius: 20px;

  .logStyle {
    color: #3faa63;
    font-size: 15px;
    font-weight: bold;
  }

  .el-dialog-header {
    background-color: #edf9ed;
    margin-right: 0px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
  }
  .my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #3eab63;
  }
}
</style>

<style>
.my_form .el-form-item__content {
  width: 400px;
}
</style>
